<template>
  <div class="secondhand-login">
    <!-- 顶部logo -->
    <div class="login-header">
      <div class="logo">
        <span class="logo-text">淘书巴士</span>
        <van-tag round type="danger">二手</van-tag>
      </div>
      <p class="welcome">欢迎登录二手书交易平台</p>
    </div>

    <!-- 登录表单 -->
    <div class="login-form">
      <van-cell-group inset>
        <van-field
          v-model="loginForm.username"
          label="账号"
          placeholder="请输入手机号/用户名"
          :border="false"
          clearable
        />
        <van-field
          v-model="loginForm.password"
          label="密码"
          placeholder="请输入密码"
          type="password"
          clearable
        />
      </van-cell-group>

      <div class="login-btn">
        <van-button 
          round 
          block 
          type="primary" 
          color="#8b4513" 
          @click="onClickLogin"
          :loading="loading"
        >
          登录
        </van-button>
      </div>
    </div>

    <!-- 其他登录方式 -->
    <div class="other-login">
      <div class="divider">
        <span class="line"></span>
        <span class="text">其他登录方式</span>
        <span class="line"></span>
      </div>
      <div class="login-methods">
        <van-icon name="wechat" size="24" color="#07C160" />
        <van-icon name="alipay" size="24" color="#1677FF" />
        <van-icon name="weibo" size="24" color="#FF2442" />
      </div>
    </div>

    <!-- 底部注册链接 -->
    <div class="register-link">
      <span>还没有账号？</span>
      <van-button 
        type="primary" 
        color="#8b4513" 
        plain 
        size="small" 
        @click="onRegister"
      >
        立即注册
      </van-button>
    </div>
  </div>
</template>

<script>
import { showToast } from 'vant';
import { loginAPI } from "@/api/user.js";
import { useUserStore } from '@/stores/user.js';

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loading: false,
    };
  },

  mounted() {
    const userStore = useUserStore();
    if (userStore.theUser) {
      this.loginForm.username = userStore.theUser.username;
    }
  },

  methods: {
    async onClickLogin() {
      if (!this.loginForm.username.trim()) {
        showToast("请输入账号");
        return;
      }
      if (!this.loginForm.password.trim()) {
        showToast("请输入密码");
        return;
      }

      this.loading = true;
      try {
        const result = await loginAPI(this.loginForm);
        
        showToast({
          message: "登录成功！",
          icon: "passed",
          duration: 1000
        });
        
        const userStore = useUserStore();
        userStore.setToken(result.data.token);
				const user = {
					id:result.data.id,
					avatar : result.data.avatar,
					username:result.data.username
				}
        userStore.setUser(user);

        // 登录成功后跳转
        const toPath = this.$route.query.redirect || "user";
        this.$router.push(toPath);
      } catch (error) {
        console.error("登录失败:", error);
        showToast(error.message || "登录失败，请重试");
      } finally {
        this.loading = false;
      }
    },

    onRegister() {
      this.$router.push({ name: "register" });
    },
  },
};
</script>

<style lang="less" scoped>
.secondhand-login {
  background-color: #f9f5ed;
  min-height: 100vh;
  padding: 30px 20px;
	padding-top:150px;
  
  .login-header {
    text-align: center;
    margin-bottom: 40px;
    
    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
      
      .logo-text {
        font-size: 24px;
        font-weight: bold;
        color: #8b4513;
        margin-right: 10px;
        font-family: "楷体", serif;
      }
    }
    
    .welcome {
      font-size: 16px;
      color: #666;
      margin: 0;
    }
  }
  
  .login-form {
    margin-bottom: 30px;
    
    /deep/ .van-cell-group {
      background-color: transparent;
      
      .van-cell {
        background-color: white;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        
        &:first-child {
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
        }
        
        &:last-child {
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
        }
      }
    }
    
    .login-btn {
      margin-top: 20px;
      
      /deep/ .van-button {
        height: 44px;
        font-size: 16px;
      }
    }
  }
  
  .other-login {
    margin: 40px 0;
    
    .divider {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      
      .line {
        flex: 1;
        height: 1px;
        background-color: #e8e8e8;
      }
      
      .text {
        padding: 0 15px;
        font-size: 12px;
        color: #999;
      }
    }
    
    .login-methods {
      display: flex;
      justify-content: center;
      gap: 30px;
    }
  }
  
  .register-link {
    text-align: center;
    font-size: 14px;
    color: #666;
    
    .van-button {
      margin-left: 10px;
    }
  }
}
</style>